import React from 'react';
import { exportPDF, PrimaryC } from '../../components';

import { Tabs } from 'antd';
import ExportPDF1 from './exportPDF1';
import ExportPDF2 from './exportPDF2';
import ExportPDF3 from './exportPDF3';
import ExportPDF4 from './exportPDF4';
import ExportPDF5 from './exportPDF5';
import ExportPDF6 from './exportPDF6';
import ExportPDF7 from './exportPDF7';
import ExportPDF8 from './exportPDF8';
import ExportPDF9 from './exportPDF9';

const { TabPane } = Tabs;

class PdfImport extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      activeKey: '9',
      exportLoading: false,
      loading: false,
    };
  }

  componentDidMount() {}

  onClick = (e) => {
    this.setState({ loading: true });
    const { id, drawingItemName, name } = e[0];
    console.log(id, drawingItemName, name, 'onClick');
    const pdf = new exportPDF();
    pdf.savePDF(id, drawingItemName, name, (type) => {
      this.setState({ loading: false });
    });
  };

  render() {
    const { activeKey, loading } = this.state;
    const tabsList = [
      {
        name: '仅1页',
        key: '1',
        id: 'drawingBoard1',
        drawingItemName: 'drawingItemName1',
        component: (props) => <ExportPDF1 {...props} />,
      },
      {
        name: '换页，但不是表格',
        key: '2',
        id: 'drawingBoard2',
        drawingItemName: 'drawingItemName2',
        component: (props) => <ExportPDF2 {...props} />,
      },
      {
        name: '换页，且表头正好在最下面，但空间不够，此时应该不分页',
        key: '3',
        id: 'drawingBoard3',
        drawingItemName: 'drawingItemName3',
        component: (props) => <ExportPDF3 {...props} />,
      },
      {
        name: '分页后面无元素',
        key: '4',
        id: 'drawingBoard4',
        drawingItemName: 'drawingItemName4',
        component: (props) => <ExportPDF4 {...props} />,
      },
      {
        name: '分页后面还有元素',
        key: '5',
        id: 'drawingBoard5',
        drawingItemName: 'drawingItemName5',
        component: (props) => <ExportPDF5 {...props} />,
      },
      {
        name: '上一次分页的最后一页当中还包含要分页的表格',
        key: '6',
        id: 'drawingBoard6',
        drawingItemName: 'drawingItemName6',
        component: (props) => <ExportPDF6 {...props} />,
      },
      {
        name: '表头和body换行',
        key: '7',
        id: 'drawingBoard7',
        drawingItemName: 'drawingItemName7',
        component: (props) => <ExportPDF7 {...props} />,
      },
      {
        name: '超过10页',
        key: '8',
        id: 'drawingBoard8',
        drawingItemName: 'drawingItemName8',
        component: (props) => <ExportPDF8 {...props} />,
      },
      {
        name: '一个分页表格在一页底部结束时',
        key: '9',
        id: 'drawingBoard9',
        drawingItemName: 'drawingItemName9',
        component: (props) => <ExportPDF9 {...props} />,
      },
    ];
    return (
      <div style={{ padding: '20px' }}>
        <PrimaryC onClick={() => this.onClick(tabsList.filter((x) => x?.key === activeKey))} title='导出' loading={loading} style={{ marginBottom: '20px' }} />
        <div style={{ width: '1301px' }}>
          <Tabs
            activeKey={activeKey}
            onChange={(e) => {
              this.setState({ activeKey: e });
            }}
            items={tabsList.map((x) => {
              const { component, ...other } = x;
              return {
                label: x.name,
                key: x.key,
                children: (
                  <div id={x.id} style={{ width: '1301px' }}>
                    {component(other)}
                  </div>
                ),
              };
            })}
          />
        </div>
      </div>
    );
  }
}

export default PdfImport;
